<template>
  <el-drawer
    title="购物车"
    :with-header="false"
    :visible.sync="$store.state.cartShow"
    :direction="'rtl'"
  >
    <el-card class="cart-card">
      <div slot="header" class="cart-header">
        <h2>购物车</h2>
        <span class="amount">￥ {{ productTotalAmount }} (不含包装费)</span>
        <el-button
          icon="el-icon-delete"
          type="danger"
          size="mini"
          @click="clearCart"
          >清空</el-button
        >
      </div>
      <ul class="cart-list">
        <li
          class="cart-list-item"
          v-for="item in productList"
          :id="item.id"
          :key="item.id + '-'"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-image :src="item.foodUrl" fit="cover"></el-image>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col :span="12">
                  <h3>{{ item.foodName }}</h3>

                  <h1 class="product-price">￥{{ item.foodPrice }}</h1>
                </el-col>
                <el-col :span="8">
                  <el-input-number
                    label="描述文字"
                    v-model="item.amount"
                    size="mini"
                    :min="1"
                    style="width: 100px; margin-top: 20px"
                  ></el-input-number>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2"
              ><el-button
                type="danger"
                style="margin-top: 20px"
                size="mini"
                @click="delCart(item.id)"
                >删除</el-button
              ></el-col
            >
          </el-row>
          <el-divider></el-divider>
        </li>
      </ul>
      <el-button
        type="success"
        size="medium"
        style="margin-bottom: 10px"
        @click="handleSettlementClick"
        >结算</el-button
      >
    </el-card>
  </el-drawer>
</template>

<script>
import cartService from "../../service/CartService";
import productService from "../../service/ProductService";
export default {
  props: ["cartShow", "shopId"],
  data() {
    return {
      productList: [],
    };
  },
  computed: {
    lastProductAddTime() {
      return this.$store.state.lastProductAddTime;
    },
    productTotalAmount() {
      return productService.calcProductTotalAmount(this.productList);
    },
  },
  watch: {
    lastProductAddTime() {
      this.getProductList();
    },
  },
  methods: {
    async getProductList() {
      try {
        this.productList = await cartService.getProductList(this.shopId);
        // 获取购物车商品列表完成，向外触发加载完成事件
        this.$emit("loadComplete");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    getCartTotal() {
      return cartService.getCartTotal(this.productList);
    },
    getProductListLocal() {
      return this.productList;
    },
    handleSettlementClick() {
      this.$store.commit("toggleCart");
      this.$emit("handle-settlement");
    },
    clearCart() {
      this.$confirm("清空购物车所有商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "清空成功!",
          });
          cartService.clearCart();
          window.location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "",
          });
        });
      //
    },
    //删除商品 购物车
    delCart(id) {
      cartService.deleteCart(id)
      var li = document.getElementById(id)
      li.style.display = 'none';
    },
  },

  created() {
    this.getProductList();
    
  },
};
</script>

<style lang="less" scoped>
.cart-card {
  h2 {
    display: inline;
    margin: 0;
  }
  .el-button {
    float: right;
  }
}
.cart-list {
  padding: 0;
  .cart-list-item {
    .el-image {
      width: 64px;
      height: 64px;
    }
    h3 {
      font-size: 14px;
      margin: 0;
      margin-bottom: 10px;
    }
    span {
      font-size: 12px;
      color: #666;
    }
    .product-price {
      margin: 0;
      margin-top: 10px;
      color: #f60;
      font-size: 18px;
    }
  }
}
.amount {
  margin-left: 5px;
  font-weight: 600;
}
</style>
